<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>1-基本指令</title>
		<!--CDN-->
		<!--<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js">
			
		</script>-->
		<script type="text/javascript" src="../../lib/vue/vue.min.js" ></script>
		<link  id="style_sheet" rel="stylesheet" href="../css/css01.css" />
	</head>
	<body class="dbody">
		<h1>1- 插值</h1>
		<div id="app">
			<p>{{message}}</p>
			<input type="text" v-model="person.sex" />
			sex is -> {{person.sex}}
		</div>
		<script>
			new Vue({
				el:"#app",
				data:{
					message:'hello vue!!!12312',
					person: {sex:""}
				},
				created() {
					console.log("create ================="+this.message)
				},
				mounted() {
//					alert(12312);
					console.log("mounted ================="+this.message)
				},
				watch: {
					'person.sex' : function(oldValue,newValue) {
						console.log(oldValue,newValue)
					}
				}
			});
		</script>
		<h1>2- v-html输出</h1>
		<div id="app2">
			<p v-html="message"></p>			
		</div>
		<script>
			new Vue({
				el:"#app2",
				data:{
					message:'<font color="red">hello vue!!!</font>'
				}
			});
		</script>
		<h1>3- v-bind输出</h1>
		<h2>demo01</h2>
		<style>
			.class01{
			  background: #444;
			  color: #eee;
			}
		</style>
		<p>通过v-model绑定变量class_exp的值，
			判断 class_exp1 的值，如果为 true 使用 class01 类的样式，否则不使用该类：</p>
		<p>v-bind:class="{'绑定的class名':变量名}"</p>
		<div id="app3">
			<label for="r1">点击标签变色</label>
			<input type="checkbox" id="r1" v-model="isCls" />
			被v-model绑定的isCls的值<font color="red">{{isCls}}</font>
			<div v-bind:class="{'class01':isCls}">
				被v-bind改变样式的字段
			</div>
		</div>
		<script>
			new Vue({
				el:"#app3",
				data:{
					isCls:true
				}
			});
			
		</script>
		<h2>demo02</h2>
		<div id="app4">
			<textarea v-model="text_area"></textarea>
			<textarea>{{text_area}}</textarea>
		</div>
		<script>
			new Vue({
				el:"#app4",
				data:{
					text_area:''
				}
			})
		</script>
		
		<h1>4- 指令</h1>
		<p>指令是带有 v- 前缀的特殊属性指令用于在表达式的值改变时，将某些行为应用到 DOM 上。</p>
		
		<h2>4.1- 监听指令</h2>
		<div id="app5">
			<button v-on:click="showHide">隐藏/显示</button>
			<p v-if="isHide">隐藏内容</p>
			<button v-on:click="reverseStr">倒序/正序</button>
			<p>{{str}}</p>
		</div>
		<script>
			new Vue({
				el:"#app5",
				data:{
					isHide:false,
					str:'1234567890'
				},
				methods:{
					showHide:function(){
						if(this.isHide){
							this.isHide=false;
						}else{
							this.isHide=true;
						}
					},
					reverseStr:function(){
						this.str=this.str.split("").reverse().join("");
					}
				}
			})
		</script>
		
		<h2>4.1- 过滤器</h2>
		<pre>
			&lt;!-- 在两个大括号中 --&gt;
			{{ message | capitalize }}
			&lt;!-- 在 v-bind 指令中 --&gt;
			&lt;div v-bind:id="rawId | formatId"&gt;&lt;/div&gt;
			
			过滤器可以串联：
			{{ message | filterA | filterB }}
			过滤器是 JavaScript 函数，因此可以接受参数：
			{{ message | filterA('arg1', arg2) }}
			这里，message 是第一个参数，字符串 'arg1' 将传给过滤器作为第二个参数， arg2 表达式的值将被求值然后传给过滤器作为第三个参数。
		</pre>
		过滤器函数接受表达式的值作为第一个参数。
		以下实例对输入的字符串第一个字母转为大写：
		<div id="app6">
			<input type="text" v-model="message" />
		  {{ message | capitalize }}
		</div>
		    
		<script>
			new Vue({
			  el: '#app6',
			  data: {
			    message: 'runoob'
			  },
			  filters: {
			    capitalize: function (value) {
			      if (!value) return ''
			      value = value.toString()
			      return value.charAt(0).toUpperCase() + value.slice(1)
			    }
			  }
			})
		</script>
		
		<h2>4.2- 缩写</h2>
		<xmp>
			Vue.js 为两个最为常用的指令提供了特别的缩写：
			<!-- 完整语法 -->
			<a v-bind:href="url"></a>
			<!-- 缩写 -->
			<a :href="url"></a>
			v-on 缩写
			<!-- 完整语法 -->
			<a v-on:click="doSomething"></a>
			<!-- 缩写 -->
			<a @click="doSomething"></a>
		</xmp>
		
		<h1>5- Vue 实例</h1>
		<h2>构造器</h2>
		每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例来启动的：
		<xmp>
			var vm = new Vue({
			  // 选项
			})
		</xmp>
		
		<h2>属性与方法</h2>
		每个 Vue 实例都会代理其 data 对象里所有的属性：
		<pre>
		var data = { a: 1 }
		var vm = new Vue({
		  data: data
		})
		vm.a === data.a // -> true
		// 设置属性也会影响到原始数据
		vm.a = 2
		data.a // -> 2
		// ... 反之亦然
		data.a = 3
		vm.a // -> 3
		除了 data 属性， Vue 实例暴露了一些有用的实例属性与方法。这些属性与方法都有前缀 $，以便与代理的 data 属性区分。例如：
		var data = { a: 1 }
		var vm = new Vue({
		  el: '#example',
		  data: data
		})
		vm.$data === data // -> true
		vm.$el === document.getElementById('example') // -> true
		// $watch 是一个实例方法
		vm.$watch('a', function (newVal, oldVal) {
		  // 这个回调将在 `vm.a`  改变后调用
		})
		</pre>
	</body>
</html>
